import { format } from 'sql-formatter';
import { Input, Form, Select, Checkbox, Card, Button } from 'antd'
import { useState } from 'react';
import Highlight from 'react-highlight'

import 'highlight.js/styles/idea.css'
import styles from './index.module.css'

const { TextArea } = Input;

const SqlFormatter: React.FC = () => {
    const [srcData, setSrcData] = useState('')
    const [targetData, setTargetData] = useState('')
    const srcChange = (val:string) => {
        setSrcData(val)
        setTargetData(format(val, { language: 'mysql' }))
    }

    const targetChange = (val:string) => {
        setSrcData(val)
        setTargetData(val)
    }

    
    return (
        <div style={{height: "100%"}}>

            <div className={styles.opTitle}>
                <Form layout="inline">
                <Form.Item label="数据库方言" name="sql">
                    <Select
                        defaultValue="sql"
                        style={{width: "200px"}}
                        options={[
                            { value: 'sql', label: 'SQL' },
                            { value: 'mysql', label: 'MySQL' },
                            { value: 'mariadb', label: 'MariaDB'},
                            { value: 'plsql', label: 'Oracle PL/SQL' },
                            { value: 'postgresql', label: 'PostgreSQL'},
                            { value: 'sqlite', label: 'SQLite'},
                            { value: 'db2', label: 'IBM DB2'},
                            { value: 'transactsql', label: 'SQL Server Transact-SQL'},
                            { value: 'hive', label: 'Apache Hive'},
                            { value: 'spark', label: 'Spark'},
                        ]}/>
                </Form.Item>

                <Form.Item label="关键字大小写" name="case">
                    <Select
                        defaultValue="Uppercase"
                        style={{width: "200px"}}
                        options={[
                            { value: 'Preserve', label: '保留' },
                            { value: 'Uppercase', label: '大写' },
                            { value: 'Lowercase', label: '小写'},
                        ]}/>
                </Form.Item>

                <Form.Item label="缩进样式" name="indentation">
                    <Select
                        defaultValue="Standard"
                        style={{width: "200px"}}
                        options={[
                            { value: 'Standard', label: '标准' },
                            { value: 'Left', label: '靠左' },
                            { value: 'Right', label: '靠右'},
                        ]}/>
                </Form.Item>

                <Form.Item label="别名对齐" name="alignAliases">
                    <Checkbox />
                </Form.Item>

                <Form.Item>
                    <Button type="primary">复制内容</Button>
                </Form.Item>
                
                </Form>
            </div>

            <div style={{display: "flex", height: "90%"}}>
                <TextArea onChange={(e) => srcChange(e.target.value)} value={srcData} className={styles.textArea} style={{resize: "none", marginRight: "10px"}}/>
                {/* <TextArea onChange={(e) => targetChange(e.target.value)} value={targetData} className={styles.textArea}/> */}
                <Card className={styles.textArea} style={{fontSize: "large", overflow: "auto"}}>
                    <Highlight className='sql'>
                        {targetData}
                    </Highlight>
                </Card>
                
            </div>
        </div>
        
    )
}

export default SqlFormatter